<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象和jQuery对象相互转换</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>
        <p>因为原生 js比 jQuery更大，原生的一些属性和方法 jQuery没有给我们封装。想要使用这些属性和方法，需要把 jQuery对象转换为 DOM对象才能使用。</p>
    </div>
    <script>
        var jsDOM = document.querySelector('div');
        var jqDOM = $('div');
        // 将 jQuery对象转换为 DOM对象
        // 方法一：$('div')[index]   index 是索引号
        var toDOM1 = $('div')[0]
        // 方法二：$('div').get(index)   index 是索引号
        var toDOM2 = $('div').get(0)
        console.dir(toDOM2)
        toDOM1.style.display = 'none'

        // 将 DOM对象转换为 jQuery对象
        var toJQ = $(jsDOM);
        // toJQ.hide();
        console.dir(toJQ)
    </script>
</body>
</html>